<template>
  <div class="support">
    <el-image
      style="width: 100%; height: 250px"
      :src="require('../assets/1.jpg')"
      fit="cover"
    ></el-image>
    <div class="support_card">
      <el-image style="width: 100%" :src="list.url" fit="cover"></el-image>
      <div class="item_center">
        <div class="center_title">{{ list.name }}</div>
        <div class="center_info">{{ list.descr }}</div>
        <div class="center_info1">
          <div style="margin: 20px 0">目标金额：￥{{ list.money }}元</div>
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="compile"
            status="exception"
          >
          </el-progress>
          <el-row :gutter="20" style="margin: 20px 0">
            <el-col :span="6">已筹集：￥{{ list.alIn }}元</el-col>
            <el-col :span="6" :offset="6"
              >支持次数：{{ list.support }}次</el-col
            >
          </el-row>
          <div style="width: 100%; text-align: right">
            <el-button type="warning" round @click="buy">我要支持</el-button>
          </div>
          <div class="" v-html="list.content"></div>
        </div>
      </div>
    </div>

    <el-dialog
      title="支持一下"
      :visible.sync="support"
      width="50%"
      v-if="support"
    >
      <supports :id="list.id"></supports>
    </el-dialog>

    <el-backtop></el-backtop>
  </div>
</template>

<script>
import supports from "../components/supports.vue";
export default {
  components: {
    supports,
  },
  data() {
    return {
      list: "",
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      compile: "",
      support: false,
    };
  },
  methods: {
    buy() {
      if (
        sessionStorage.getItem("bfid") == "" ||
        sessionStorage.getItem("bfid") == null
      ) {
        this.$message.error("请先登录");
      } else {
        this.support = true;
      }
    },
    getData() {
      this.$http
        .postRequest("main/support/show", {
          id: this.$route.query.id,
        })
        .then((res) => {
          console.log(res.data);
          if (res.code === 0) {
            this.list = res.data;
            this.compile = Number(
              res.data.money == 0
                ? ""
                : ((res.data.alIn / res.data.money) * 100).toFixed(2)
            );
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mounted() {
    let that = this;
    that.getData();
    that.$bus.$off("cl");
    that.$bus.$on("cl", function (data) {
      that.support = false;
      that.getData();
    });
  },
  beforeDestroy() {
    this.$bus.$off("cl");
  },
};
</script>

<style scoped>
/*在Chrome下移除input[number]的上下箭头*/
.no-number::-webkit-outer-spin-button,
.no-number::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}

.no-number input[type="number"]::-webkit-outer-spin-button,
.no-number input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}

/*在firefox下移除input[number]的上下箭头*/
.no-number {
  -moz-appearance: textfield;
}

.no-number input[type="number"] {
  -moz-appearance: textfield;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
}

.support {
  padding-bottom: 30px;
}

.support_card {
  width: 80%;
  margin: auto;
}

.teach_item:hover {
  border: 1px solid #425994;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.teach_item:hover .arrow {
  background: #425994;
  color: #ffffff;
}

.teach_item {
  margin-top: 13px;
  padding-left: 20px;
  padding-top: 23px;
  padding-bottom: 26px;
  border: 1px solid #eeeeee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.center_title {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.center_info {
  font-size: 14px;
  font-weight: 400;
  color: #535353;
  margin-top: 21px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.center_info1 {
  margin: 20px 40px 20px 0;
}
</style>
